import React from 'react'
import { View, StyleSheet, Text } from 'react-native'
import { ScaleT, ScaleS } from 'src/utils/ScreenUtil'
import PropTypes from 'prop-types'
import CustomModalAnimatable from '../modal/CustomModalAnimatable'
import CustomButton from '../button/CustomButton'

export default class ActionSheetModal extends React.PureComponent {
  onCancel = () => {
    this.selectIndex = null
    this.props.onCancel && this.props.onCancel()
  }

  selectIndex = null

  onItemClick = index => {
    this.selectIndex = index + 1
    this.props.selectClick && this.props.selectClick(index)
  }

  onModalHideTemp = () => {
    this.props.onModalHide && this.props.onModalHide(this.selectIndex)
  }

  render () {
    const { titleText, selectArr } = this.props
    return (
      <CustomModalAnimatable
        {...this.props}
        onCancel={this.onCancel}
        onModalHideTemp={this.onModalHideTemp}
      >
        <View style={styles.photoSelectTopVIew}>
          <View style={styles.photoSelectItemView}>
            <Text style={styles.photoSelectAddText}>{titleText}</Text>
          </View>
          {selectArr.map((item, index) => (
            <View key={'selectArr' + index}>
              <View style={styles.photoLine} />
              <CustomButton
                params={index}
                style={styles.photoSelectItemView}
                onPress={this.onItemClick}
              >
                <Text style={styles.photoSelectItemText}>{item.label}</Text>
              </CustomButton>
            </View>
          ))}
        </View>
        <CustomButton style={styles.cancelSelectView} onPress={this.onCancel}>
          <Text style={styles.cancelText}>取消</Text>
        </CustomButton>
      </CustomModalAnimatable>
    )
  }
}
ActionSheetModal.propTypes = {
  visible: PropTypes.bool,
  titleText: PropTypes.string,
  selectArr: PropTypes.array,
  onCancel: PropTypes.func,
  selectClick: PropTypes.func,
  onModalHide: PropTypes.func
}
ActionSheetModal.defaultProps = {
  visible: false,
  selectArr: []
}

const styles = StyleSheet.create({
  photoSelectTopVIew: {
    marginBottom: ScaleS(8),
    marginHorizontal: ScaleS(6),
    borderRadius: ScaleS(14),
    backgroundColor: '#F8F8F8',
    opacity: 0.82
  },
  photoSelectAddText: {
    color: '#8F8F8F',
    fontSize: ScaleT(13),
    fontWeight: '400'
  },
  photoLine: {
    height: ScaleS(1),
    backgroundColor: '#3F3F3F',
    opacity: 0.82
  },
  photoSelectItemView: {
    paddingVertical: ScaleS(15),
    justifyContent: 'center',
    alignItems: 'center'
  },
  photoSelectItemText: {
    color: '#007AFF',
    fontSize: ScaleT(20),
    fontWeight: '400'
  },
  cancelSelectView: {
    backgroundColor: 'white',
    borderRadius: ScaleS(14),
    paddingVertical: ScaleS(16),
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: ScaleS(6),
    marginHorizontal: ScaleS(6)
  },
  cancelText: {
    color: '#007AFF',
    fontSize: ScaleT(20),
    fontWeight: '400'
  }
})
